<template>
  <div class="mypersonal">
    <myheader title="用户信息">
      <span
        slot="left"
        class="iconfont iconjiantou2"
        @click="$router.back()"
      ></span>
      <router-link
        class="van-icon van-icon-wap-home-o"
        to="/index"
        slot="right"
      >
      </router-link>
    </myheader>
    <router-link :to="'/myeditprofile/' + obj.id">
      <div class="profile">
        <img :src="obj.head_img" alt />
        <div class="profile-center">
          <div class="name">
            <span
              :class="{
                iconfont: true,
                iconxingbienan: obj.gender == 1,
                iconxingbienv: obj.gender == 0,
              }"
            >
            </span
            >{{ obj.nickname }}
          </div>
          <div class="time">{{ obj.create_date | dateformat }}</div>
        </div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </router-link>
    <div class="forms">
      <router-link to="/myfocus">
        <mycell title="我的关注" content="关注的用户">
          <van-badge :content="obj.post_follows" />
        </mycell>
      </router-link>

      <router-link to="/mykeeps">
        <mycell title="我的跟帖" content="跟帖/回复">
          <van-badge :content="keeps" /> </mycell
      ></router-link>
      <router-link to="/mynewlists">
        <mycell title="我的收藏" content="文章/视频">
          <van-badge :content="obj.post_star" /> </mycell
      ></router-link>
      <mycell title="设置"></mycell>
    </div>
    <mybtn @myclick="back" type="danger">退出</mybtn>
  </div>
</template>

<script>
import mycell from "@/components/hmcell.vue";
import myheader from "@/components/hmheader.vue";
import mybtn from "@/components/hmbutton.vue";
import { dateformat } from "@/utils/myfilters.js";
import axios from "@/utils/myaxios.js";
import { getUserid, getusercommentslist } from "@/apis/user.js";
export default {
  props: ["title"],
  components: {
    mycell,
    mybtn,
    myheader,
  },
  data() {
    return {
      obj: {},
      keeps: 0,
    };
  },
  filters: {
    dateformat,
  },
  methods: {
    back() {
      this.$router.push({ name: "index" });
      localStorage.removeItem("heima-headline-user");
      localStorage.removeItem("heima-headline");
    },
  },
  async mounted() {
    //获取页面所需基本数据
    let res = await getUserid(this.$route.params.id);
    if (res.data.message == "获取成功") {
      res.data.data.head_img = axios.defaults.baseURL + res.data.data.head_img;
      this.obj = res.data.data;
    }
    // 获取我的跟帖上标的数据
    let ress = await getusercommentslist();
    this.keeps = ress.data.data.length;
  },
};
</script>

<style lang="less" scoped>
.mypersonal {
  width: 100%;
  height: 100vh;
  background-color: #eee;
}
a {
  color: #666;
}
.profile {
  padding: 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px #ddd solid;

  img {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    border-radius: 50%;
  }

  .profile-center {
    flex: 1;
    padding: 0 10px;
  }

  .name {
    span {
      color: #75b9eb;
    }
  }

  .time {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
  }
}
.forms {
  margin-bottom: 20px;
}
.profile .name .iconxingbienv {
  color: rgb(228, 114, 180);
}
.logos {
  padding-right: -10px;
}
</style>